<style src="@/css/components/form.css"></style>
<style>
  .training-text textarea {
    width: 400px;
    height: 80px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid rgba(225,231,235,1);
    border-radius: 2px;
}
</style>
<template>
<el-form ref="form" :rules="rules" :model="form" label-width="116px">
    <el-form-item label="学习计划" prop="title" required>
        <el-input v-model="form.title" placeholder="请输入学习计划名称" maxlength="50"></el-input>
    </el-form-item>
    <el-form-item label="起始日期" prop="time" required>
        <el-date-picker
            v-model="form.time"
            :picker-options="setStateTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>


    </el-form-item>

    <el-form-item label="简介" prop="synopsis" required>
        <div class="training-editor">
            <editor :content="inputContent" v-model="form.synopsis" maxlength="5000" @input="getEdit"></editor>
        </div>
    </el-form-item>


    <el-form-item label="备注" >
        <div class="training-text">
            <textarea v-model="form.remark" maxlength="140"></textarea>
        </div>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" class="showdow" @click="createPlan('form')">{{ butTitle }}</el-button>
    </el-form-item>
</el-form>
</template>


<script>

    import editor from 'components/wangeditor.vue'

    export default {
        props: ['parameter'],

        data() {
            var validateEditor = (rule, value, callback) => {
                if (value.trim() == '' || value.trim() == '<p><br></p>') {
                    callback(new Error('请输入学习计划简介'));
                }

                callback();
            }

            return {
                form:{
                    title: "",
                    time: [],
                    synopsis: "",
                    remark:""
                },

                butTitle:'下一步',
                rules: {
                    title: [
                        { required: true, message: '请输入学习计划名称', trigger: 'blur' },
                    ],

                    time: [
                        { required: true, message: '请选择时间', trigger: 'change' },
                    ],

                    synopsis:[
                        { required: true, validator: validateEditor, trigger: 'blur' },
                        { max: 5000, message: '最大可输入为5000字', trigger: 'blur' }
                    ],

                    remark:[
                        { required: true, message: '请输入备注', trigger: 'blur' }
                    ]
                },

                setStateTime:{
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 1000*60*60*24
                    }
                }
            }
        },


        components: {
            editor
        },

        watch:{
            parameter(value) {
                if( !value) return ;

                this.form = {
                    title: value.Title,
                    time: [value.StartTime, value.FinishTime],
                    synopsis: value.Abstract,
                    remark:value.Remark
                }

                this.inputContent = value.Abstract
                // this.butTitle = '编辑学习计划'
            }
        },

        methods:{
            createPlan(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let param = {
                            Title: this.form.title,
                            Abstract: this.form.synopsis,
                            Remark: this.form.remark,
                            StartTime: this.form.time[0],
                            FinishTime:this.form.time[1]
                        }

                        this.$emit('setFrom', param )
                    }
                })
            },

             // 富文本编辑
            getEdit(value) {
                this.form.synopsis = value
            }
        }
    }
</script>
